<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${post.title + ' - 论坛交流'}">帖子详情 - 学习资源平台</title>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/navbar.css}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/forumdetail.css}">
</head>
<body>
<div class="container">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">云学堂</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/resource/list}">学习资源</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/assignment/list}">作业与考试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" th:href="@{/forum/list}">交流互动</a>
                    </li>
                    <li class="nav-item" th:if="${session.identity=='superAdmin' || session.identity=='ordinaryAdmin'}">
                        <a class="nav-link" th:href="@{/admin/index}">管理中心</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/user/digital}">个人中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/user/logout}">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="row mt-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a th:href="@{/forum/list}">论坛首页</a></li>
                    <li class="breadcrumb-item">
                        <span th:if="${post.categoryId != null}"
                              th:text="${categoryName}">版块名称</span>
                    </li>
                    <li class="breadcrumb-item active" th:text="${post.title}">帖子标题</li>
                </ol>
            </nav>

            <!-- 帖子内容 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 th:text="${post.title}" class="post-title">帖子标题</h3>
                    <div class="post-meta">
                        作者:
                        <span th:if="${post.authorId != null}"
                              th:text="${postSubmissionAuthor}">作者</span>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        发表时间: <span
                            th:text="${#temporals.format(post.createdTime, 'yyyy-MM-dd HH:mm')}">发表时间</span>
                        &nbsp;&nbsp;|&nbsp;&nbsp;
                        浏览: <span th:text="${post.viewCount}">0</span>
                    </div>
                </div>
                <div class="card-body">
                    <p th:text="${post.content}" class="post-content">帖子内容</p>
                </div>
            </div>
            <!-- 回复列表 -->
            <div class="card mb-4">
                <div class="card-header">
                    <strong>全部回复 (<span th:text="${page.total}">0</span>)</strong>
                </div>
                <div class="card-body">
                    <div th:if="${page.records.isEmpty()}" class="empty-replies">
                        <i class="fas fa-comment-slash fa-2x mb-3"></i>
                        <h5>暂无回复</h5>
                        <p class="text-muted">快来发表第一条评论吧！</p>
                    </div>
                    <div th:each="reply : ${page.records}" class="media mb-3 border-bottom pb-3">
                        <div class="media-body">
                            <h6 class="mt-0 mb-1">
                        <span th:if="${reply.authorId != null}"
                                th:text="${authorMap.get(reply.authorId)} ?: '未知用户'">回复者</span>
                                <small class="text-muted float-right"
                                       th:text="${#temporals.format(reply.createdTime, 'yyyy-MM-dd HH:mm')}">回复时间</small>
                            </h6>
                            <p th:text="${reply.content}" class="reply-content">回复内容</p>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <nav aria-label="Reply pagination" th:if="${page.pages > 1}">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" th:classappend="${page.current <= 1} ? 'disabled'">
                                <a class="page-link"
                                   th:href="@{'/forum/post/' + ${post.id} + '?page=' + ${page.current - 1}}">
                                    <i class="fas fa-chevron-left"></i> 上一页
                                </a>
                            </li>

                            <li class="page-item" th:each="i : ${#numbers.sequence(1, page.pages)}"
                                th:classappend="${i == page.current} ? 'active'">
                                <a class="page-link"
                                   th:href="@{'/forum/post/' + ${post.id} + '?page=' + ${i}}"
                                   th:text="${i}">1</a>
                            </li>

                            <li class="page-item" th:classappend="${page.current >= page.pages} ? 'disabled'">
                                <a class="page-link"
                                   th:href="@{'/forum/post/' + ${post.id} + '?page=' + ${page.current + 1}}">
                                    下一页 <i class="fas fa-chevron-right"></i>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- 发表回复 -->
            <div class="card">
                <div class="card-header">
                    <strong><i class="fas fa-reply me-2"></i>发表回复</strong>
                </div>
                <div class="card-body">
                    <form th:action="@{/forum/reply}" method="post">
                        <input type="hidden" name="postId" th:value="${post.id}">
                        <div class="form-group">
                            <textarea class="form-control" name="content" rows="4" placeholder="请输入回复内容..."
                                      required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-paper-plane me-2"></i>发表回复
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>